<!DOCTYPE html>

<html lang="zh-cn" style="--olcb-folder-code-block-max-height:80vh;">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="origin-when-cross-origin">


    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Flipclock</title>

    <style>
        #home :not(.cnblogs_code):not(.cnblogs_Highlighter)>pre:not([highlighted]):not([class*="brush:"]) code:not(.hljs),
        :not(.cnblogs_code):not(.cnblogs_Highlighter)>pre:not([highlighted]):not([class*="brush:"]) code:not(.hljs) {
            background: rgb(243, 243, 243);
            padding: 13px;
            border: 0px none rgb(68, 68, 68);
            border-radius: 0px;
            border-color: transparent;
            color: rgb(68, 68, 68);
            font-family: monospace;
            font-size: 13px
    </style>
    <link rel="stylesheet" href="./Res/blog-common.min.css">




    <link type="text/css" rel="stylesheet" href="./Res/custom.css">

    <link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet"
        href="./Res/mobile-common.min.css">



    <script type="text/javascript" async="" src="./Res/analytics.js"></script>
    <script>
        var currentBlogId = 646430;
        var currentBlogApp = '99kk';
        var isLogined = false;
        var isBlogOwner = false;
        var skinName = 'white';
        var visitorUserId = '';
        var hasCustomScript = true;
        try {
            if (hasCustomScript && document.referrer && document.referrer.indexOf('baidu.com') >= 0) {
                Object.defineProperty(document, 'referrer', { value: '' });
                Object.defineProperty(Document.prototype, 'referrer', { get: function () { return ''; } });
            }
        } catch (error) { }
        window.cb_enable_mathjax = false;
        window.mathEngine = 0;
        window.codeHighlightEngine = 1;
        window.enableCodeLineNumber = false;
        window.codeHighlightTheme = 'cnblogs';
        window.darkModeCodeHighlightTheme = 'vs2015';
        window.isDarkCodeHighlightTheme = false;
        window.isDarkModeCodeHighlightThemeDark = true;
        window.isDisableCodeHighlighter = false;
        window.enableCodeThemeTypeFollowSystem = false;
    </script>
    <script src="./Res/jquery-2.2.0.min.js"></script>
    <script src="./Res/blog-common.min.js"></script>
    <style>
        /* .medium-zoom-overlay {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0;
            transition: opacity 300ms;
            will-change: opacity;
        }

        .medium-zoom--opened .medium-zoom-overlay {
            cursor: pointer;
            cursor: zoom-out;
            opacity: 1;
        }

        .medium-zoom-image {
            cursor: pointer;
            cursor: zoom-in; */
            /*
    The `transition` is marked as "!important" for the animation to happen
    even though it's overriden by another inline `transition` style attribute.

    This is problematic with frameworks that generate inline styles on their
    images (e.g. Gatsby).

    See https://github.com/francoischalifour/medium-zoom/issues/110
   */
            transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
        }

        .medium-zoom-image--hidden {
            visibility: hidden;
        }

        .medium-zoom-image--opened {
            position: relative;
            cursor: pointer;
            cursor: zoom-out;
            will-change: transform;
        }
    </style>
    <link id="highlighter-theme-cnblogs" href="./Res/cnblogs.css" rel="stylesheet" type="text/css">
    <script id="hljs-script" src="./Res/highlight.min.js" type="text/javascript" async=""></script>



</head>

<body class="skin-white no-navbar play">
    <div class="container">
        <ul class="flip hourPlay hour1Play">
            <li class="">
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">0</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">0</div>
                    </div>
                </a>
            </li>
            <li class="">
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">1</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">1</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">2</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">2</div>
                    </div>
                </a>
            </li>
        </ul>
        <ul class="flip hourPlay hour2Play">
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">0</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">0</div>
                    </div>
                </a>
            </li>
            <li class="">
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">1</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">1</div>
                    </div>
                </a>
            </li>
            <li class="">
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">2</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">2</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">3</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">3</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">4</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">4</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">5</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">6</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">6</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">7</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">7</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">8</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">8</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">9</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">9</div>
                    </div>
                </a>
            </li>

        </ul>
        <ul class="flip minutePlay minute1Play">
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">0</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">0</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">1</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">1</div>
                    </div>
                </a>
            </li>
            <li class="">
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">2</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">2</div>
                    </div>
                </a>
            </li>
            <li class="">
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">3</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">3</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">4</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">4</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">5</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">5</div>
                    </div>
                </a>
            </li>
        </ul>
        <ul class="flip minutePlay minute2Play">
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">0</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">0</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">1</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">1</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">2</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">2</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">3</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">3</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">4</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">4</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">5</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">5</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">6</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">6</div>
                    </div>
                </a>
            </li>
            <li class="">
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">7</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">7</div>
                    </div>
                </a>
            </li>
            <li class="">
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">8</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">8</div>
                    </div>
                </a>
            </li>
            <li>
                <a href ="#">
                    <div class="up">
                        <div class="shadow"></div>
                        <div class="inn">9</div>
                    </div>
                    <div class="down">
                        <div class="shadow"></div>
                        <div class="inn">9</div>
                    </div>
                </a>
            </li>
        </ul>
        <div class="second">
            <ul class="flip secondPlay second1Play">
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">0</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">0</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">1</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">1</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">2</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">2</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">3</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">3</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">4</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">4</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">5</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">5</div>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="flip secondPlay second2Play">
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">0</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">0</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">1</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">1</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">2</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">2</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">3</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">3</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">4</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">4</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">5</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">5</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">6</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">6</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">7</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">7</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">8</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">8</div>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href ="#">
                        <div class="up">
                            <div class="shadow"></div>
                            <div class="inn">9</div>
                        </div>
                        <div class="down">
                            <div class="shadow"></div>
                            <div class="inn">9</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

    </div>

    <div id="page_end_html">
        <script src="./Res/jquery.min.js"></script>
        <script>
            var date = new Date();
            setInterval(function () {
                var s2 = (new Date()).getSeconds() % 10;
                var s1 = ((new Date()).getSeconds() - s2) / 10;
                var m2 = (new Date()).getMinutes() % 10;
                var m1 = ((new Date()).getMinutes() - m2) / 10;
                var h2 = (new Date()).getHours() % 10;
                var h1 = ((new Date()).getHours() - h2) / 10;


                minute1Play(m1 - 1)
                minute2Play(m2 - 1)
                second1Play(s1 - 1)
                second2Play(s2 - 1)
                hour1Play(h1 - 1)
                hour2Play(h2 - 1)
                console.log(h1 + " " + h2 + ":" + m1 + " " + m2 + ":" + s1 + " " + s2)
            }, 1000);



            function second2Play(s2) {
                $("body").removeClass("play");
                var aa = $("ul.second2Play li").eq(s2);
                if (aa.html() == undefined) {
                    aa = $("ul.second2Play li").eq(0);
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");

                }
                else if (aa.is(":last-child")) {
                    $("ul.second2Play li").removeClass("before");
                    aa.addClass("before").removeClass("active");
                    aa = $("ul.second2Play li").eq(0);
                    aa.addClass("active")
                        .closest("body")
                        .addClass("play");
                }
                else {
                    $("ul.second2Play li").removeClass("before");
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");
                }

            }

            function second1Play(s1) {
                $("body").removeClass("play");
                var aa = $("ul.second1Play li").eq(s1);
                if (aa.html() == undefined) {
                    aa = $("ul.second1Play li").eq(0);
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");

                }
                else if (aa.is(":last-child")) {
                    $("ul.second1Play li").removeClass("before");
                    aa.addClass("before").removeClass("active");
                    aa = $("ul.second1Play li").eq(0);
                    aa.addClass("active")
                        .closest("body")
                        .addClass("play");
                }
                else {
                    $("ul.second1Play li").removeClass("before");
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");
                }

            }

            function minute2Play(m2) {
                $("body").removeClass("play");
                var aa = $("ul.minute2Play li").eq(m2);

                if (aa.html() == undefined) {
                    aa = $("ul.minute2Play li").eq(0);
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");

                }
                else if (aa.is(":last-child")) {
                    $("ul.minute2Play li").removeClass("before");
                    aa.addClass("before").removeClass("active");
                    aa = $("ul.minute2Play li").eq(0);
                    aa.addClass("active")
                        .closest("body")
                        .addClass("play");
                }
                else {
                    $("ul.minute2Play li").removeClass("before");
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");
                }

            }

            function minute1Play(m1) {
                $("body").removeClass("play");
                var aa = $("ul.minute1Play li").eq(m1);

                if (aa.html() == undefined) {
                    aa = $("ul.minute1Play li").eq(0);
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");

                }
                else if (aa.is(":last-child")) {
                    $("ul.minute1Play li").removeClass("before");
                    aa.addClass("before").removeClass("active");
                    aa = $("ul.minute1Play li").eq(0);
                    aa.addClass("active")
                        .closest("body")
                        .addClass("play");
                }
                else {
                    $("ul.minute1Play li").removeClass("before");
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");
                }

            }

            function hour2Play(h2) {
                $("body").removeClass("play");
                var aa = $("ul.hour2Play li").eq(h2);
                if (aa.html() == undefined) {
                    aa = $("ul.hour2Play li").eq(0);
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");

                }
                else if (aa.is(":last-child")) {
                    $("ul.hour2Play li").removeClass("before");
                    aa.addClass("before").removeClass("active");
                    aa = $("ul.hour2Play li").eq(0);
                    aa.addClass("active")
                        .closest("body")
                        .addClass("play");
                }
                else {
                    $("ul.hour2Play li").removeClass("before");
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");
                }

            }

            function hour1Play(h1) {
                $("body").removeClass("play");
                var aa = $("ul.hour1Play li").eq(h1);

                if (aa.html() == undefined) {
                    aa = $("ul.hour1Play li").eq(0);
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");

                }
                else if (aa.is(":last-child")) {
                    $("ul.hour1Play li").removeClass("before");
                    aa.addClass("before").removeClass("active");
                    aa = $("ul.hour1Play li").eq(0);
                    aa.addClass("active")
                        .closest("body")
                        .addClass("play");
                }
                else {
                    $("ul.hour1Play li").removeClass("before");
                    aa.addClass("before")
                        .removeClass("active")
                        .next("li")
                        .addClass("active")
                        .closest("body")
                        .addClass("play");
                }

            }
        </script>
    </div>

    <input type="hidden" id="antiforgery_token"
        value="CfDJ8GXQNXLgcs5PrnWvMs4xAGM6em88B3s56wJWSR-SroLIA0F9huvIsJ16FvkJN946kx32ld02DbT8ajfYOhGBN1Rp8vCR7eQxowlXTpTeSLTWyXVK03LF9RtLaHWchaW5BfFCFZbJ78KzrjPaLuoTzPA">
    <script async="" src="./Res/js"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        var kv = getGACustom();
        if (kv) {
            gtag('set', kv);
        }
        gtag('config', 'UA-476124-1');
    </script>
    <script defer="" src="./Res/hm.js"></script>

</body>

</html>